<template>
  <div class="user-detail music-cpns-common">
    <div class="top">
      <div class="avarImg">
        <img :src="$filters.formatImgSize(details.avatarUrl, 230)" alt="404" />
      </div>
      <div class="message">
        <div class="m-top">
          <h2>{{ details.nickname }}</h2>
          <div class="title">
            <div
              class="desc"
              v-for="item in details.allAuthTypes"
              v-show="item.type != 400"
              :key="item.type"
            >
              {{ item.desc }}
            </div>
            <div class="desc">Lv{{ level }}</div>
            <div class="desc">
              <el-icon v-if="details.gender == 1" color="#409eff"
                ><male
              /></el-icon>
              <el-icon v-else-if="details.gender == 2" color="#FF7A9E"
                ><female
              /></el-icon>
              <el-icon v-else color="#409eff"><mostly-cloudy /></el-icon>
            </div>
            <el-button
              type="primary"
              size="small"
              :color="bcColor == '#fff' ? '#717FF9' : bcColor"
              class="pri-right"
              v-if="isMe"
              @click="handelEdit"
              ><el-icon :style="{ fontSize: '14px', marginRight: '5px' }">
                <edit /> </el-icon
              >编辑个人信息</el-button
            >
          </div>
        </div>
        <el-divider />
        <div class="person">
          <div class="doing">
            <div class="d-item">
              <div>{{ details.eventCount }}</div>
              <span>动态</span>
            </div>
            <div class="d-item">
              <div>{{ details.follows }}</div>
              <span>关注</span>
            </div>
            <div class="d-item">
              <div>{{ details.followeds }}</div>
              <span>粉丝</span>
            </div>
          </div>
          <div class="say">
            <span>个人介绍:{{ details.signature }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="center" style="width: 99%; margin-top: 20px">
      <el-tabs
        v-model="activeName"
        @tab-click="handleClick"
        style="margin-left: 50px"
      >
        <el-tab-pane label="创建的歌单" name="one">
          <div class="all">
            <div
              class="songs-item"
              v-for="(item, index) in plays"
              :key="item.userId"
              @click="toSongs(item.id, index, false)"
            >
              <div class="img-it">
                <img
                  :src="$filters.formatImgSize(item.coverImgUrl, 230)"
                  alt="404"
                />
              </div>
              <span class="text-full-hidden title-name">{{ item.name }}</span>
              <span class="songs">{{ item.trackCount }}首</span>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="收藏的歌单" name="two" v-if="isMe">
          <div class="all">
            <div
              class="songs-item"
              v-for="(item, index) in subSongs"
              :key="item.userId"
              @click="toSongs(item.id, index, true)"
            >
              <div class="img-it">
                <img
                  :src="$filters.formatImgSize(item.coverImgUrl, 230)"
                  alt="404"
                />
              </div>
              <span class="text-full-hidden title-name">{{ item.name }}</span>
              <span class="songs">{{ item.trackCount }}首</span>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="最近动态" name="three">
          <div class="dynamic" v-if="dynamics.length">
            <template v-for="dy in dynamics" :key="dy.id">
              <div class="dy-item">
                <div class="img">
                  <img
                    :src="$filters.formatImgSize(dy.user.avatarUrl, 50)"
                    alt="404"
                  />
                </div>
                <div class="show-dy">
                  <div class="title">
                    <span class="nickname">{{ dy.user.nickname }}</span>
                    <span>发布动态</span>
                  </div>
                  <div class="time">
                    <span>{{ $filters.formatTime(dy.eventTime) }}</span>
                  </div>
                  <div class="content">
                    <div class="title" v-if="dy.actName">
                      # {{ dy.actName }} #
                    </div>
                    <div class="text text-auto-line">
                      {{ dy.text }}
                    </div>
                  </div>
                  <div class="btn-del" v-if="isDy && isMe">
                    <el-button
                      size="mini"
                      round
                      type="info"
                      @click="delDy(dy.id)"
                    >
                      删除动态
                      <el-icon><edit></edit></el-icon>
                    </el-button>
                  </div>
                </div>
              </div>
            </template>
          </div>
          <h3 v-else>暂无状态哦！</h3>
        </el-tab-pane>
      </el-tabs>
      <div class="find" v-if="isDy && isMe">
        <el-button size="mini" round type="info" @click="SentDy">
          发布动态
          <el-icon><edit></edit></el-icon>
        </el-button>
      </div>
    </div>
    <el-dialog v-model="dialogFormVisible" title="分享">
      <el-form :model="form">
        <el-form-item label="分享动态">
          <el-input
            type="textarea"
            placeholder="一起聊聊音乐吧~"
            v-model="form.name"
            maxlength="140"
            show-word-limit
            resize="none"
          ></el-input>
        </el-form-item>
        <el-form-item label="选择音乐">
          <el-select v-model="form.region" placeholder="请选择你喜爱的音乐">
            <template v-for="item in likeList" :key="item.id">
              <el-option :label="item.name" :value="item.id" />
            </template>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="handelShare">分享</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, reactive } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useStore } from 'vuex'
import {
  getUserDetail,
  getUserPlayList,
  getEvent,
  shareEvent,
  getCount,
  delEvent
} from '@/service/user'
import { Message } from '@/utils/message'

const route = useRoute()
const router = useRouter()
const store = useStore()
const uid = Number(route.params.id)
const activeName = ref('one')
const bcColor = computed(() => store.state.theme.bcColor)
const isMe = ref(false)
if (uid === store.getters['login/getUserId']) {
  isMe.value = true
}
const details = ref<any>({})
const songNums = reactive({
  createdPlaylistCount: 0
})
const subSongs: any = ref([])
const getNums = (id: number) => {
  getCount(id).then((res: any) => {
    songNums.createdPlaylistCount = res.createdPlaylistCount
      ? res.createdPlaylistCount
      : 6
    const allSongs = [...store.state.login.userPlayList]
    subSongs.value = allSongs.slice(res.createdPlaylistCount)
    getList(uid, songNums.createdPlaylistCount - 1)
  })
}
getNums(uid)
// const profileImg = ref('')
const plays: any = ref([])
const level = ref(0)
const getUser = (id: number) => {
  getUserDetail(id).then((res: any) => {
    level.value = res.level
    details.value = res.profile
    // profileImg.value = res.profileVillageInfo.targetUrl
  })
}
const getList = (id: number, limit: number) => {
  let flag = false
  if (limit === 0) {
    limit = 1
    flag = true
  }
  getUserPlayList(id, limit).then((res: any) => {
    if (flag) {
      plays.value = [...res.playlist].slice(0, 1)
      return
    }
    plays.value = res.playlist
  })
}
getUser(uid)
const toSongs = (id: number, i: number, flag: boolean) => {
  if (flag || i !== 0) {
    router.push('/main/songsheet' + id)
  } else {
    Message('对方设置了隐私禁止查看', 'warning')
  }
}
// 编辑信息
const handelEdit = () => {
  router.push('/main/edituser')
}
// 动态
const form = reactive({
  name: '',
  region: ''
})
const dialogFormVisible = ref(false)
const isDy = ref(false)
const dynamics = ref<any>([])
const fnSubcount = (id: number) => {
  getEvent(id).then((res: any) => {
    dynamics.value = res.events
    dynamics.value.map((item: any) => {
      if (item.actName) {
        const arr = JSON.parse(item.json).msg.split('#')
        if (arr.length > 2) {
          item.text = arr[2]
        } else {
          item.text = arr[0]
        }
      } else {
        item.text = JSON.parse(item.json).msg
      }
    })
  })
}
// 发布动态
const likeList: any = ref([])
const SentDy = () => {
  dialogFormVisible.value = true
  console.log(store.state.login.likeList.tracks)
  const arr = [...store.state.login.likeList.tracks]
  likeList.value = arr.slice(0, 20)
}
const handelShare = () => {
  if (!form.name || !form.region) {
    Message('未选择音乐或内容为空', 'warning')
    return
  }
  shareEvent(Number(form.region), form.name).then((res: any) => {
    if (res.code == 200) {
      dialogFormVisible.value = false
      Message('发布成功', 'success')
      fnSubcount(uid)
    }
  })
}
// 珊瑚
function delDy(id: number) {
  console.log(id)
  delEvent(id).then((res: any) => {
    console.log(res)
    if (res.code === 200) {
      Message('删除成功', 'success')
      fnSubcount(uid)
    }
  })
}
// 切换标签页
const handleClick = (tab: any) => {
  switch (tab.props.name) {
    case 'two':
      isDy.value = false
      break
    case 'three':
      fnSubcount(uid)
      isDy.value = true
      break
    default:
      console.log('one')
      isDy.value = false
  }
}
</script>

<style scoped lang="less">
.user-detail {
  width: 100%;
  padding: 15px 20px;

  .top {
    display: flex;
    padding: 0 10px;
    .avarImg {
      margin-right: 10px;
      img {
        width: 200px;
        height: 200px;
        border-radius: 50%;
      }
    }
    .message {
      flex: 1;
      .m-top {
        height: 80px;
        .title {
          display: flex;
          position: relative;
          .desc {
            margin-right: 5px;
            height: 20px;
            line-height: 20px;
            padding: 2px 6px;
            font-size: 12px;
            background: #fff3dc;
            color: #ffb67e;
            border-radius: 10px;
          }
          .pri-right {
            position: absolute;
            right: 5px;
          }
        }
      }
      .person {
        height: 120px;
        .doing {
          display: flex;
          .d-item {
            width: 66px;
            height: 60px;
            border-right: 1px solid #eee;
            color: #333;
            margin-right: 14px;

            div {
              font-size: 15px;
            }
            span {
              font-size: 12px;
            }
          }
        }
        .say {
          color: #333;
          font-size: 16px;
        }
      }
    }
  }

  .center {
    position: relative;
    .find {
      position: absolute;
      top: 0px;
      right: 0;
    }
    .all {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      .songs-item {
        color: #333;
        font-size: 15px;
        cursor: pointer;
        margin-top: 12px;
        margin-right: 18px;
        .img-it {
          margin-bottom: 5px;
          img {
            width: 200px;
            height: 200px;
            border-radius: 10px;
          }
        }
        span.title-name {
          display: inline-block;
          width: 200px;
        }
        span.songs {
          font-size: 12px;
          display: block;
        }
      }
    }
    .dynamic {
      width: 100%;
      padding: 10px 20px;
      .btn-del {
        position: absolute;
        bottom: 0;
        right: 28px;
      }
      .dy-item {
        display: flex;
        margin: 10px 0px;
        padding-bottom: 20px;
        border-bottom: 1px solid #eee;
        .img {
          margin-right: 6px;
          cursor: pointer;
          img {
            width: 35px;
            height: 35px;
            border-radius: 50%;
          }
        }
        .show-dy {
          flex: 1;
          position: relative;
          .title {
            font-size: 13px;
            .nickname {
              margin-right: 7px;
              color: #507daf;
            }
          }
          .time {
            margin-top: 7px;
            font-size: 12px;
            color: #ffb67e;
          }
          .content {
            margin-top: 10px;
            font-size: 14px;
            padding: 0 7px;
            .title {
              color: #507daf;
              margin: 6px 0;
            }
            .text {
              line-height: 20px;
            }
          }
        }
      }
    }
  }
}
</style>
